<template>
	<view class="idPhone">
		<view class="idPhonePo">
			<image src="../static/bg@2x.png" mode=""></image>
		</view>
		<view class="idphone-box">
			<view class="idphone-heart" v-if="tempFilePaths==''">
				<image src="../static/wire@2x.png" mode=""></image>
			</view>
			<!-- 上传成功之后的显示区域 -->
			<view class="idphone-heart" style=" " v-if="tempFilePaths!==''">
				<view class="idphone-heart-img2">
					<!-- 原型轮廓 -->
					<view class="" style="width:466rpx;height: 482rpx;  margin: auto;margin-top: 140rpx;">
						<!-- 拍照的人像 -->
						<image :src="tempFilePaths" mode="" style=" "></image>
					</view>
				</view>
			</view>
			<view class="idphone-title">
				为保证打印效果，请确保上传证件照<text class="text-or">轮廓清晰</text>,<text class="text-or">光线充足</text>,用美颜处理效果更佳哦
			</view>
			<view class="idPhonesub-box">
				<!--  #ifdef  MP-WEIXIN -->
				<view class="idPhone-submit flex align-center just-center" @click="idphoneSubmit"
					v-if="tempFilePaths==''">
					上传图片
				</view>
				<!--  #endif -->
				<!--  #ifdef  MP-QQ -->
				<button class="idPhone-submit flex align-center just-center" open-type="getUserInfo"
					@click="idphoneSubmit" v-if="tempFilePaths==''">
					上传图片
				</button>
				<!--  #endif -->
				<view v-else>
					<view class="idPhone-submit flex align-center just-center" @click="idphoneSubmit">
						重新上传
					</view>
					<view class="idPhone-submit flex align-center just-center" @click="idphoneChange"
						style="margin-top: 40rpx;">
						确认提交
					</view>
				</view>
			</view>
		</view>
		<!--上传成功后的弹窗 -->
		<upo-pu v-if="show">
			<template slot="content">
				{{titlesshow}}
			</template>
			<!-- 请点击确定后操作打印设备打印 -->
			<template slot="contentItem">
				{{titleItem}}
			</template>

		</upo-pu>
	</view>
</template>
<script>
	import {
		choss
	} from '@/utils/facility/idPhoneImg.js'
	// 封装设备打印成功之后的提示弹出框
	import upoPu from '@/components/u-popu/u-popu.vue'
	import {
		login
	} from "@/utils/facility/login.js"
	import {
		choosImg,
		choosImgend
	} from '@/api/facility/idPhoneImg.js'
	export default {
		components: {
			upoPu
		},
		data() {
			return {
				// subbutton:false//控制
				tempFilePaths: '', //上传成功之后的图片
				show: false, //控制上传成功后的弹窗的
				titlesshow: '', //上传成功失败的提示
				titleItem: '', //上传成功失败的之后的下一步操作 
				Submit: true, //点击重新上传的防抖
				Change: true, //确认提交的防抖
				orderId: '', //订单id
				urlq: '', //传输的完整的二维码链接
				specId: '', //证件照spec_id
				unionId: '' //本地存储的openid是unionId
			}
		},
		onShow() {
			this.unionId = uni.getStorageSync('openid');
		},
		onLoad(options) {
			if (options.q) {
				var scan_url = decodeURIComponent(options.q);
				// var scan_url = "https://api.cloudmis.cn?id='7'&orderId=DD80319D0C3E4DCF92AF354E28D541F6&specid=1";
				// console.log(scan_url, 'sc"an_url')
				// console.log(scan_url)
				// var url = "https://api.cloudmis.cn?id='1'&orderId=weoifhwufw&specId=0";
				// var reg = /[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i;
				var reg =
					/[a-z]+:\/\/([A-Za-z0-9.]+)+\?(([a-z])+=([A-Za-z0-9']+)+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)+\&([A-Za-z0-9]+)+=([A-Za-z0-9']+)/i;
				var arr = scan_url.match(reg);
				this.orderId = arr[6]
				this.specId = arr[8]
				this.urlq = options.q
			}

		},
		methods: {
			// 上传图片
			idphoneSubmit() {
				if (this.unionId == '') {
					login().then(res => {
						this.idphone();
					})
				} else {
					this.idphone();
				}
			},
			idphone() {
				if (this.Submit) { ////点击重新上传的防抖   点击提交打印的时候就不可以重复提交
					choss(1).then(res => { //调用图片打印封装的api  参数是打印的最大张数 
						this.tempFilePaths = res[0];
					}).catch(res => {})
				}
			},
			// 确认提交跳转到
			idphoneChange() {
				if (this.Change) { //确认提交的防抖
					this.Change = false; //点击提交防抖
					this.Submit = false; //点击重新上传的防抖
					uni.showLoading({
						title: '上传中...'
					});
					choosImg({
						// 修改后
						postdata: [{
								fileId: 'unionId', //unicode
								value: this.unionId
							},
							{
								fileId: 'orderId',
								value: this.orderId, //订单id
							},
							{
								fileId: 'specId', //unicode
								value: this.specId, //证件照规格idthis.specId
							},
							{
								fileId: 'index',
								value: '1'
							}, {
								fileId: 'count',
								value: '2'
							}
						],
						filePath: this.tempFilePaths
					}).then(res => {
						if (res.success == true) {
							// 修改后 
							choosImgend([{
								fileId: 'orderId',
								value: this.orderId
							}, {
								fileId: 'unionId',
								value: this.unionId
							}]).then(result => {
								uni.hideLoading();
								this.titlesshow = res.message;
								this.titleItem = "请点击确定后操作打印设备打印";
								this.tempFilePaths = '';
								this.show = true //上传成功之后显示弹窗 
							})

						} else if (res.success == false) {
							uni.hideLoading();
							this.titlesshow = res.message;
							this.titleItem = "请点击确定后退出重试";
							this.tempFilePaths = '';
							this.show = true //上传成功之后显示弹窗  

						}
					}).catch(error => {
						console.log(error, '上传失败服务器异常')
						// this.trycatch("上传失败服务器异常", "请点击确定后退出重试")
						this.trycatch(error.errMsg, "请点击确定后退出重试")
					})

				}
			},
			trycatch(name1, name2) {
				uni.hideLoading()
				this.titlesshow = name1
				this.titleItem = name2
				this.show = true
			},
		}
	}
</script>

<style>
	.idphone-heart {
		height: 624rpx;
		width: 500rpx;
		margin: 112rpx auto 64rpx;
	}

	.idphone-heart-img2 {
		height: 624rpx;
		width: 500rpx;
		overflow: hidden;
		box-sizing: border-box;
		background: url('../static/wireno@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;


	}

	.idPhone {
		width: 100%;
		height: 100%;
	}

	.idPhonePo {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.idphone-box {
		width: 100%;
		/* border: 1px solid red; */
		position: absolute;
	}

	.idphone-heart {

		height: 624rpx;
		width: 500rpx;
		margin: 112rpx auto 64rpx;

	}

	.text-or {
		color: #FE5734;
	}

	.idphone-title {
		padding: 0rpx 140rpx 76rpx 130rpx;
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #CBCBCB;
	}

	.idPhonesub-box {
		padding: 0rpx 32rpx 0rpx 30rpx;
		font-size: 18px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #FFFFFF;
	}

	.idPhone-submit {
		width: 100%;
		height: 80rpx;
		background: #FE5734;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20px;

	}

	.idPhone-success {
		width: 100%;
		height: 80rpx;
		background: #E5E5E5;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20px;
	}
</style>
